<template>
  <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="750px">
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-row :gutter="[24, 0]">
          <a-col :span="12">
            <a-form-item class="mb-15" label="宠物类型" :label-col="labelCol" :wrapper-col="wrapperCol"
                        >
              <a-select class="flex-1"  placeholder="请选择" @change="changeSelect" v-decorator="['relatedPetType', { rules: [{ required: true, message: '请选择' }] }]">
                <a-select-option :value="0" key="0">
                  猫
                </a-select-option>
                <a-select-option :value="1" key="1">
                  狗
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="12">
            <a-form-item class="mb-15" label="分类名称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input
                placeholder="请输入"
                v-decorator="[
                  'categoryName',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }],
                  },
                ]"
                maxLength="30"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="mb-15" label="分类编码" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input
                placeholder="请输入"
                v-decorator="[
                  'categoryCode',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }],
                  },
                ]"
                maxLength="30"
              ></a-input>
            </a-form-item>
          </a-col>

        </a-row>



        <a-row :gutter="[24, 0]">
          <a-col :span="12">
            <a-form-item class="mb-15" label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-switch
                checked-children="已上架"
                un-checked-children="未上架"
                v-decorator="['status', { valuePropName: 'checked' }]"
              />
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { get } from 'lodash'
import { cateSave, cateAdd } from '@/api/index'
export default {
  data() {
    return {
      loading: false,
      isShow: true,
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
      details: {},
      showModal: false,
      titles: '新增',
      info: {},
      form: this.$form.createForm(this),
      fatherName: '',
    }
  },
  computed: {},
  watch: {},
  async created() {},
  methods: {
    formgetFileLength(type) {
      //获取图片
      return get(this.form.getFieldValue(type), 'length') || 0
    },
    formuploadSuccess(data, type) {
      this.form.setFieldsValue({
        iconPath: [data.path],
      })
    },
    changeSelect(e) {
      console.log(e)
    },
    onChange(e) {
      console.log(e.target.value)
    },
    cancel() {
      this.form.resetFields()
      this.showModal = false
    },
    confirmOk() {
      // console.log(444,this.form.validateFields())
      this.form.validateFields((err, values) => {
        console.log(3333, values)
        if (!err) {
          this.loading = true
          const { info } = this
          let data = {
            scope: 2,
            id: info && info.id ? info.id : undefined,
            ...this.$utils.trimValue(values),
            status: values.status === true || values.status === 1 ? 1 : 0,
          }
          const fun = info && info.id ? cateSave : cateAdd
          fun(data)
            .then(() => {
              this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
              this.$emit('upload')
              this.cancel()
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    getData() {
      this.loading = true
      deductionDetail({ id: 1 })
        .then((data) => {
          this.details = data
        })
        .finally(() => (this.loading = false))
    },
    openSon(data) {
      this.fatherName = data.categoryName
      this.info = data
      this.titles = '修改'
      this.showModal = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          parentCategoryCode: data.categoryCode,
        })
      })
    },
    open(data) {
      this.fatherName = ''
      this.info = data
      if (data.id) {
        this.titles = '修改'
      } else {
        this.titles = '新增'
      }
      this.showModal = true
      // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
      this.$nextTick(() => {
        this.form.setFieldsValue({
          id: this.info.id,
          categoryCode: this.info.categoryCode,
          categoryName: this.info.categoryName,
          iconPath: [this.info.iconPath],
          parentCategoryCode: this.info.parentCategoryCode,
          status: this.info.status,
          relatedPetType: this.info.relatedPetType*1,
          scope: 2,
        })
      })
      // this.$emit('upload')
      // this.$nextTick(() => {
      //     this.form.setFieldsValue({
      // 					...res
      // 				})

      // 			})
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  // width: 100px;
}
</style>
